<script setup>
import { message } from 'ant-design-vue'
import problemApi from '@/api/problem/problemApi'
import { h } from 'vue';



const screenRecord = async () => {

	if (!navigator.mediaDevices) {
		message.error("请使用https访问");
		return;
	}


	try {
		const stream = await navigator.mediaDevices.getDisplayMedia();
		const recoder = new MediaRecorder(stream);
		recoder.start();
		const [video] = stream.getVideoTracks();
		video.addEventListener("ended", () => {
			recoder.stop();
		});
		recoder.addEventListener("dataavailable", (evt) => {
			//const a = document.createElement("a");
			//a.href = URL.createObjectURL(evt.data);
			// console.log(evt.data);
			const blob = evt.data;
			// 转换Blob为File对象
			const file = new File([blob], "problem.webm", {
				type: blob.type,
			});

			// 使用FormData构造一个可以发送给后端的表单数据
			const formData = new FormData();
			formData.append("file", file);
			formData.append("param", new Blob([JSON.stringify({
				description: "",
				reportIp: "127.0.0.1",
				reportMac: "MAC"
			})], { type: 'application/json' }))

			problemApi.save(formData);
			message.info("问题上传成功！");
			//	a.download = "bug.webm";
			//a.click();
			//todo 此处还要上传到后端侧
		});
	} catch (e) {
			console.log("可能用户点击了取消")
	}

}

</script>

<template>
	<a-tooltip title="问题录制" @click="screenRecord">
		<svg style="position: relative;left:-6px;" t="1720754845624" class="icon" viewBox="0 0 1024 1024" version="1.1"
			xmlns="http://www.w3.org/2000/svg" p-id="4438" width="30" height="30">
			<path d="M512 0A512 512 0 1 1 0 512 512 512 0 0 1 512 0z" fill="#FFBB6C" p-id="4439"></path>
			<path
				d="M643.157333 267.690667h-234.666666a117.333333 117.333333 0 0 0-117.290667 117.290666v234.666667a117.162667 117.162667 0 0 0 117.290667 117.290667h234.666666a117.034667 117.034667 0 0 0 117.333334-117.290667v-234.666667a117.162667 117.162667 0 0 0-117.290667-117.290666z m-207.829333 356.096a17.578667 17.578667 0 0 1-35.2 0v-114.474667a17.578667 17.578667 0 1 1 35.2 0z m108.16 0a17.621333 17.621333 0 0 1-35.2 0v-159.274667a17.621333 17.621333 0 0 1 35.2 0z m108.373333 0a17.621333 17.621333 0 0 1-35.2 0V381.013333a17.621333 17.621333 0 1 1 35.2 0z"
				fill="#FFFFFF" p-id="4440"></path>
		</svg>
	</a-tooltip>
</template>




<style scoped lang="less"></style>
